﻿<template>
  <v-card>
    <v-card-title>
      <span class="headline" v-text="isEdit ? '修改模块' : '新增模块'"></span>
    </v-card-title>
    <v-divider/>
    <v-card-text class="px-3">
      <v-form v-model="valid" ref="myListForm">
        <v-container grid-list-md>
          <v-layout wrap>
            <v-flex class="md12">
              <v-cascader
                      itemText="childrenName"
                      itemValue="id"
                      url="/permission/list/of/children"
                      v-model="list.permission"
                      label="父模块名称"/>
            </v-flex>
            <v-flex>
              <v-text-field v-model="list.childrenName" label="一級模块名称" v-if="list.permission.id==21" />
              <v-text-field v-model="list.childrenName" label="二模块名称" v-else />
            </v-flex>
            <v-flex class="md6">
              <v-text-field v-model="list.childrenPath" label="一級模块路径"  v-if="list.permission.id==21" />
              <v-text-field v-model="list.childrenPath" label="二级模块路径" v-else />
            </v-flex>
          </v-layout>
        </v-container>
      </v-form>
    </v-card-text>
    <v-card-actions>
      <v-spacer/>
      <v-btn depressed  small @click="submit">提交</v-btn>
      <v-btn depressed small @click="clear">重置</v-btn>
      <v-btn depressed  small @click="close">关闭</v-btn>
    </v-card-actions>
  </v-card>

</template>

<script>
  export default {
    name: "list-form",
    props: {
      oldList: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        valid: false, // 表单校验结果标记
        list: {
          id:1 ,
          parentName: '', // 父模块名称
          childrenName: '', // 二级模块名称
          childrenPath: '', // 二级模块路径
          permission: {}, // 權限信息
        },
      }
    },
    methods: {
      submit() {
        // 表单校验
        if (this.$refs.myListForm.validate()) {
          // 定义一个请求参数对象，通过解构表达式来获取list中的属性
          const { ...params} = this.list;
          // 将数据提交到后台
          // this.$http.post('/auth/list', this.$qs.stringify(params))
          this.$http({
            method: this.isEdit ? 'put' : 'post',
            url: '/permission',
            data: params
          }).then(() => {
            // 关闭窗口
            this.$emit("close");
            this.$message.success("保存成功！");
          })
            .catch(() => {
              this.$message.error("保存失败！");
            });
        }
      },
      clear() {
        // 重置表单
        this.$refs.myListForm.reset();
        // 需要手动清空员工职位
        this.list.permission = {};
      },
      close(){
        this.$emit("close");
      }
    },
    watch: {
      oldList: {// 监控oldList的变化
        handler(val) {
          if (val) {
            // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
            this.list = Object.deepCopy(val)
          } else {
            // 为空，初始化list
            this.list = {
              parentName: '',
              childrenName: '',
              childrenPath: '',
              permission: {},
            };
            this.$refs.myListForm.reset();
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>
